<template>
  <div>
    <div class="mynavContaier">
      <mynav></mynav>
    </div>
    <div class="container kline">
      <!-- <el-row :gutter="20">
          <el-col :span="24">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="时间">
                 <el-date-picker
                  v-model="formInline.date"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
       </el-row> -->
      <center-info></center-info>
      <el-row :gutter="20" :align="'middle'" class="info">
        <el-col :span="24" >
          <!-- :md-offset="18" -->
          <el-switch style="float:right" v-model="bgColor" active-text="浅色" inactive-text="深色" active-color="grey"
            inactive-color="#1f212d">
          </el-switch>
        </el-col>
      </el-row>
      <div id="kshowInfo"><div class="commColor"><div>时间</div><div>开</div><div>收</div><div>低</div><div>高</div><div>涨幅</div><div>涨跌</div></div></div>
      <hr>
      <div id="mad" style="margin-top:25px;"><div class='commColor'><div>MA5</div><div>MA10</div><div>MA20</div><div>MA30</div></div></div>
      <div class="chartPic">
        <div id="macd_cjl"><div class="cjl"><div >成交量</div><div class="macd"><div>macd</div><div>dif</div><div>dea</div></div></div></div>
        <div class="K-line" ref="klineChart"></div>
      </div>

      <el-row :gutter="20" :align="'middle'" class="info">
        <el-col :span="24">
          <el-button-group class="buttonGroup">

            <el-button v-if="type=='15_m'" type="primary">15分K</el-button>
            <el-button v-else @click="checked('15_m')">15分K</el-button>

            <el-button v-if="type=='30_m'" type="primary">30分K</el-button>
            <el-button v-else @click="checked('30_m')">30分K</el-button>

            <el-button v-if="type=='1_H'" type="primary">时K</el-button>
            <el-button v-else @click="checked('1_H')">时K</el-button>

            <el-button v-if="type=='2_H'" type="primary">2时K</el-button>
            <el-button v-else @click="checked('2_H')">2时K</el-button>

            <el-button v-if="type=='4_H'">4时K</el-button>
            <el-button v-else @click="checked('4_H')">4时K</el-button>

            <el-button v-if="type=='1_d'" type="primary">日K</el-button>
            <el-button v-else @click="checked('1_d')">日K</el-button>

            <el-button v-if="type=='1_W'" type="primary">周K</el-button>
            <el-button v-else @click="checked('1_W')">周K</el-button>

            <el-button v-if="type=='1_M'" type="primary">月K</el-button>
            <el-button v-else @click="checked('1_M')">月K</el-button>

          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div class="clear"></div>
    <myfooter></myfooter>
  </div>
</template>

<script>
  import axios from 'axios'
  import mynav from "@/components/nav";
  import myfooter from "@/components/footer";
  import echarts from "echarts";
  import * as chartData from "../../assets/js/tmpData.js";
  import {
    k_amount,
    k_price
  } from '@/api/service'
  import centerInfo from "@/components/centerinfo";
  import {
    calcMACD,
    splitData,
    calculateMA,
    bgColor,
    wrihte,
    upColor,
    downColor,
    ma5Color,
    ma10Color,
    ma20Color,
    ma30Color,
    initKOption,
  } from "../../assets/js/k-line.js";

  export default {
    kChart: null,
    opt: null,
    name: "home",
    components: {
      mynav,
      centerInfo,
      myfooter
    },
    data() {
      return {
        bgColor: true,
        clearTime:null,
        formInline: {
          date: "",
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        type: '1_d',
        param: {
          beginTime: '2020-01-01 00:00:00',
          endTime: '', //this.dateFormat(new Date(),'YYYY-mm-dd HH:MM:SS'),
          type: 'd',
          unit: 1,
        }
      };
    },
    watch: {
      bgColor(val) {
        this.opt.backgroundColor = val ? '#fff' : "#1f212d";
        this.mChart.setOption(this.opt);
      }
    },
    created(){
     this.clearTime=setInterval(()=>{this.search(this.param)},60*1000);
    },
    destroyed(){
      if(this.clearTime)clearInterval(this.clearTime);
    },
    mounted() {
      let ele = this.$refs.klineChart
      this.mChart = echarts.init(ele);
      this.search(this.param);
    },
    methods: {
      checked(args) {
        let a = args.split("_")[0];
        let b = args.split("_")[1]
        this.type = args;
        this.param.type = b;
        this.param.unit = a;
        this.search(this.param);
      },
      onSubmit() {  },
      search(args) {
        axios.all([k_price(args), k_amount(args)]).then(axios.spread((priceRes, amountRes) => {
          let openPrice = [],
            closePrice = [],
            lowestPrice = [],
            highestPrice = [],
            amount = [],
            times = [],
            dataAry = [];
          let priceAry = priceRes.data;
          let amountAry = amountRes.data;
          for (let n = 0; n < priceAry.length; n++) {
            let ary = [];
            openPrice.push(priceAry[n].open);
            closePrice.push(priceAry[n].close);
            lowestPrice.push(priceAry[n].lowest);
            highestPrice.push(priceAry[n].highest);
            ary.push(String(priceAry[n].time))
            ary.push(priceAry[n].open)
            ary.push(priceAry[n].close)
            ary.push(priceAry[n].lowest)
            ary.push(priceAry[n].highest)
            dataAry.push(ary);
          }
          for (let m = 0; m < amountAry.length; m++) {
            amount.push(amountAry[m].volume);
            times.push(amountAry[m].time)
            dataAry.forEach(item => {
              if (item[0] == amountAry[m].time) item.push(amountAry[m].volume);
            })
          }
          try {
            // console.log("dataAry",dataAry);
             this.opt = initKOption(dataAry);
             this.opt.backgroundColor = this.bgColor ? '#fff' : "#1f212d";
             this.mChart.setOption(this.opt);
          } catch (error) {
            console.error(error);
            this.$message.error('返回数据有误');
          }

        }));
      },
      dateFormat: (args, fmt) => {
        //let fmt="YYYY-mm-dd"
        let ret;
        if (args) {
          let date = new Date(args)
          const opt = {
            "Y+": date.getFullYear().toString(), // 年
            "m+": (date.getMonth() + 1).toString(), // 月
            "d+": date.getDate().toString(), // 日
            "H+": date.getHours().toString(), // 时
            "M+": date.getMinutes().toString(), // 分
            "S+": date.getSeconds().toString() // 秒
          };
          for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
              fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
          };
          return fmt;
        } else {
          return "";
        }
      }
    },
  };
</script>

<style lang="less">

  .mynavContaier {
    background: #3740c3;
    width: 100%;
    height: 75px;
  }

  .kline {
    margin: 15px auto;
    text-align: left;
    width: 100%;
    height: calc(100vh - 75px);

    .info {
      font-size: 14px;

      span {
        display: inline-block;
        margin: 5px;
      }

      span:last-child {
        font-weight: 1000;
      }

      .red {
        color: red;
      }

      .green {
        color: green;
      }
    }

    .buttonGroup {
      margin: 15px 0px;
    }

    .K-line {
      height: 100%;
      width: 100%;
    }
  }


  .chartPic{
    position:relative;
    height:550px;
    // border:1px solid red;
  }
 

.commColor {
      display: flex;
      flex-wrap: wrap;
      position:relative;
    }
  .commColor>div,.macd>div {
    margin: 0px 12px;
  }

  #macd_cjl{
    position:absolute;
    top:50%;
    left:8px;
    z-index: 2;
  }
  .macd{
    display: flex;
    flex-wrap: wrap;
    position:relative;
    top: 115px;
  }

  @media(max-width:767px){
    .cjl{
         top:180px;
    }
    .macd{
         top: 110px;
         left: -20px;
    }
    .buttonGroup button{padding:10px}
  }

</style>
